<template>
	<view class="message">
		<view class="messagelist" v-for="(item,index) in msglist" :key="index">
			<view class="title">{{item.msgContent}}</view>
			<view class="timelist">
				<view class="time">{{item.createTime}}</view>
				<view class="signbtn" @click="signbtn(item.id,index)">标记已读</view>
			</view>
		</view>
		<noMessage v-if="showempty" emptyText="无对应消息" ></noMessage>
		<uni-load-more v-if="needLoad" :status="loadingType"></uni-load-more>
		<!-- <block v-for="(item,index) in messageList" :key="index" v-if="messageList && messageList.length>0">
			<view class="message-item" @click="toMessageDetail">
				<view class="message-avatar">
					<image :src="item.avatar" mode=""></image>
				</view>
				<view class="message-wrap">
					<view class="message-content">
						<text class="message-username">{{item.userName}}</text>
						<text class="message-time">{{item.lastDate}}</text>
					</view>
					<text class="message-lastmessage">{{item.lastMessage}}</text>
				</view>
			</view>
		</block> -->
		<!-- <no-message class="message-null" v-if="!messageList || messageList.length ===0"></no-message> -->
	</view>
</template>

<script>
	import noMessage from '../../components/empty'
	export default {
		components: {
			noMessage: noMessage
		},
		data() {
			return {
				showempty:false,
				needLoad: true,
				iswaitload: false,
				page: 1,
				loading: false,
				isdone: false,
				loadingType: 'more',
				messageList: [{
						avatar: '/static/exchange/navIcon-2.png',
						userName: 'losting',
						lastMessage: '你好！',
						lastDate: '上午 9：10'
					},
					{
						avatar: '/static/exchange/navIcon-2.png',
						userName: '用户9521',
						lastMessage: 'hello，world！啦啦啦啦啦啦啦啦啦啦啊啊啦',
						lastDate: '昨天'
					},
					{
						avatar: '/static/exchange/navIcon-2.png',
						userName: '用户1111',
						lastMessage: 'hello，world！啦啦啦啦啦啦啦啦啦啦啊啊啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦',
						lastDate: '昨天'
					}
				],
				msglist: []
			};
		},
		onLoad() {
			this.getallmsg()
		},
		onReachBottom() {
			let that = this;
			if (that.isdone) {
				return false;
			}
			that.loading = true;
			that.page++
			that.loadingType = 'loading'
			that.getallmsg()
		},
		methods: {
			signbtn(id, index) {
				let that = this;
				let data = {
					ids: id
				}
				that.$Request.request('/api/message/flagRead', 'POST', data).then(res => {

					if (res.status == 1) {
						that.$api.msg(res.msg)
						that.msglist.splice(index, 1)
					}

				}).catch(err => {
					console.log(err)
				})
			},
			toMessageDetail() {
				uni.navigateTo({
					url: '../messageDetail/messageDetail'
				})
			},
			getallmsg() {
				let that = this;
				if (that.isdone) {
					return false;
				}
				let data = {
					p: that.page
				}
				that.$Request.request('/api/message/list', 'GET', data).then(res => {
					if (res.status == 1) {
						res.data.list.forEach(item => {
							that.msglist.push(item)
						})
						that.loadingType = 'more'
						that.msglist.length == 0 ? [this.showempty = true, this.needLoad = false] : [this.showempty = false, this.needLoad =
							true
						]
						if (res.data.list.length < 20) {
							that.loading = true;
							that.isdone = true;
							that.loadingType = 'noMore'
						}
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.messagelist {
		line-height: 20px;
		border-bottom: 1px solid #ccc;
		margin-bottom: 10px;
		font-size: 14px;
		padding: 10px;

		.title {}

		.timelist {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.time {
				font-size: 12px;
				color: #999;
			}

			.signbtn {
				color: #fff;
				background-color: #ff6600;
				width: 75px;
				border-radius: 5px;
				text-align: center;
				height: 20px;
				line-height: 20px;
			}
		}
	}

	@import './message.scss'
</style>
